<template>
  <el-dialog :title="title" :visible.sync="showModel" width="800px" :close-on-click-modal="false">
    <div>
      <el-form :model="authRuleForm" :rules="rules" ref="authRuleForm" label-width="120px">
        <el-form-item label="修改到店时间" prop="date" v-if="type == 'setTime'">
          <el-date-picker v-model="authRuleForm.date" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" align="right" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="拒绝订单" prop="date" v-if="type == 'Reject'">
          <el-cascader-panel ref="cascader" style="max-height: 150px;" :options="options" v-model="OrderReject"
            @change="changeRejectitem"></el-cascader-panel>
        </el-form-item>
        <el-form-item label="拒绝取消" prop="date" v-if="type == 'Cancel'">
          <el-cascader-panel ref="cascader" style="max-height: 150px;" :options="options" v-model="CancelReject"
            @change="changeCancelitem"></el-cascader-panel>
        </el-form-item>
      </el-form>
    </div>


    <div class="footer-button">
      <el-button @click="turnOff">返回</el-button>
      <el-button type="primary" @click="submitHandler('authRuleForm')">提交</el-button>
    </div>

  </el-dialog>
</template>
<script>
import { modifyLastArrTime, refuseOrder } from '@/api/common'
export default {
  data() {
    return {
      rules: {
        date: [
          { required: false, message: '请选择时间', trigger: 'blur' }
        ],
      },
      authRuleForm: {
        date: '',
        auth: '',
        state: ''
      },
      OrderReject: '',
      OrderVisible: false,
      CancelReject: '',
      CancelVisible: false,
      options: [{
        value: '1',
        label: '满房',
      }, {
        value: '2',
        label: '价格不对',
        children: [{
          value: '1',
          label: '房价高于订单日期'
        }, {
          value: '2',
          label: '房价低于订单日期'
        }, {
          value: '3',
          label: '订单价格不确定'
        }]
      }, {
        value: 'ziyuan',
        label: '其他',
      }],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  props: {
    show: {
      default: false,
      type: Boolean
    },
    type: {
      default: 'setTime',
      type: String
    },
    authData: {
      default: () => { },
      type: Object
    }
  },
  computed: {
    showModel: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    },
    title() {
      return '操作';
    }
  },
  created() {
    this.authRuleForm = { ...this.authData };
  },
  methods: {
    //拒绝取消
    async changeRefuseCancel() {
      let { data, code } = await refuseCancel({
        new_dlt_order_id: this.authData.new_dlt_order_id
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.$emit('update')
      }
    },
    //拒绝订单
    async changeRefuseOrder() {
      let { data, code } = await refuseOrder({
        new_dlt_order_id: this.authData.new_dlt_order_id
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.$emit('update')
      }
    },
    //修改到店时间
    async setmodifyLastArrTime() {
      let { data, code } = await modifyLastArrTime({
        new_dlt_order_id: this.authData.new_dlt_order_id,
        last_arr_time: this.authRuleForm.date
      })
      console.log('data,code :>> ', data, code);
      if (code == 0) {
        this.$message({
          type: 'success',
          message: '操作成功'
        });
        this.$emit('update')
      }
    },
    opencascader() {
      console.log(this.$refs.cascader);
      // this.$refs.cascader.clearCheckedNodes()
    },
    changeRejectitem(e) {
      console.log(e);
    },
    changeCancelitem(e) {
      console.log(e);
    },
    submitHandler(form) {
      console.log('date :>> ', this.authRuleForm.date);
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$emit('update')
            this.turnOff();
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })
    },
    turnOff() {
      this.showModel = false;
    }
  },

}
</script>
<style lang="scss" scoped>
.main {
  padding: 0 0px 0 20px;
}

.footer-button {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>